<template>
	<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
		<el-form-item class="form-button-right">
			<el-button v-auth="'staff:record:save'" type="primary" @click="addOrUpdateHandle()">新增</el-button>
			<el-button v-auth="'staff:record:save'" type="" @click="addOrUpdateHandle()">导入</el-button>
			<el-button v-auth="'staff:record:save'" type="" @click="addOrUpdateHandle()">导出</el-button>
			<el-button v-auth="'staff:record:delete'" type="danger" @click="deleteBatchHandle()">批量删除</el-button>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.zhiwei"
				:data="positionList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="职位"
			/>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.zhiwu"
				:data="ziWuList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="职务"
			/>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.zhiji"
				:data="jobLevelList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="职级"
			/>
		</el-form-item>
		<el-form-item>
			<el-select v-model="state.queryForm.bumen" clearable placeholder="部门"></el-select>
		</el-form-item>
		<el-form-item>
			<el-tree-select
				v-model="state.queryForm.workplace"
				:data="workplaceList"
				value-key="id"
				check-strictly
				clearable
				:render-after-expand="false"
				:props="{ value: 'id', label: 'name', children: 'children' }"
				placeholder="工作地点"
			/>
		</el-form-item>
		<el-form-item>
			<el-date-picker
				type="daterange"
				v-model="state.queryForm.time"
				is-range
				range-separator="~"
				start-placeholder="请选择日期"
				end-placeholder="请选择日期"
			/>
		</el-form-item>
		<el-form-item>
			<el-input v-model="state.queryForm.name" placeholder="请输入关键字" clearable>
				<template #append>
					<el-button :icon="Search" @click="getDataList()" />
				</template>
			</el-input>
		</el-form-item>
	</el-form>
	<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" @selection-change="selectionChangeHandle">
		<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
		<el-table-column prop="id" label="主键" header-align="center" align="center" v-if="false"></el-table-column>

		<el-table-column prop="staffId" fixed="left" label="头像/姓名" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="staffId" label="员工编号" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="staffId" label="部门" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="staffId" label="职位" header-align="center" align="center" width="150"></el-table-column>

		<el-table-column prop="qualifications" label="学历" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="academy" label="院校" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="specialty" label="专业" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="startDate" label="开始时间" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="endDate" label="结束时间" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="type" label="教育类型" header-align="center" align="center" width="150"></el-table-column>
		<el-table-column prop="isDegree" label="是否取得学位" header-align="center" align="center" width="150"></el-table-column>

		<el-table-column prop="description" label="备注" header-align="center" align="center"></el-table-column>
		<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
			<template #default="scope">
				<el-button v-auth="'staff:education:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
				<el-button v-auth="'staff:education:delete'" type="primary" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-pagination
		:current-page="state.page"
		:page-sizes="state.pageSizes"
		:page-size="state.limit"
		:total="state.total"
		layout="total, sizes, prev, pager, next, jumper"
		@size-change="sizeChangeHandle"
		@current-change="currentChangeHandle"
	>
	</el-pagination>

	<!-- 弹窗, 新增 / 修改 -->
	<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
</template>

<script setup lang="ts" name="StaffEducationIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'

import { Search } from '@element-plus/icons-vue'

defineProps(['positionList', 'ziWuList', 'jobLevelList', 'workplaceList'])

const state: IHooksOptions = reactive({
	dataListUrl: '/nb/staff/education/page',
	deleteUrl: '/nb/staff/education/delete',
	queryForm: {}
})

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
